<template>
  <div @click="togglePopover">
    <img
      :src="thumbnailUrl"
      style="width: 100px; cursor: pointer; object-fit: contain"
    />
    <el-popover placement="top" width="auto" v-model="isPopoverVisible">
      <img
        v-if="isOriginalLoaded"
        :src="originalUrl"
        alt="原图"
        style="width: 800px; height: 600px; object-fit: contain"
      />
      <div v-else>加载中...</div>
    </el-popover>
  </div>
</template>  
  
<script>
export default {
  props: {
    thumbnailUrl: String,
    originalUrl: String,
  },
  data() {
    return {
      isPopoverVisible: false,
      isOriginalLoaded: false, // 组件内部管理的状态
      originalImagePromise: null, // 可选：用于缓存加载的Promise
    };
  },
  methods: {
    togglePopover() {
      if (!this.isPopoverVisible) {
        // 如果Popover未打开且原图未加载，则加载原图
        if (!this.isOriginalLoaded && !this.originalImagePromise) {
          this.loadOriginalImage();
        }
        this.isPopoverVisible = true;
      } else {
        this.isPopoverVisible = false;
      }
    },
    async loadOriginalImage() {
      // 如果originalImagePromise已经存在，说明正在加载或已经加载过，直接返回
      if (this.originalImagePromise) return;

      // 创建一个Promise来缓存加载过程
      this.originalImagePromise = new Promise((resolve, reject) => {
        // 这里应该是异步加载原图的逻辑
        // 假设我们有一个模拟的异步函数fetchImage
        setTimeout(() => {
          // 假设这是加载完成后的处理
          // 在真实场景中，这里应该是API调用的结果
          this.isOriginalLoaded = true; // 标记为已加载
          resolve(); // 解析Promise
        }, 500); // 模拟加载时间

        // 如果有错误发生，你可以拒绝Promise
        // reject(new Error('Failed to load original image'));
      });

      // 等待Promise解析
      await this.originalImagePromise;

      // 清除Promise缓存（可选，如果不需要再次加载同一图片）
      // this.originalImagePromise = null;
    },
  },
};
</script>